<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>日期模块 - layui</title>

		<link rel="stylesheet" href="/static/layui/css/layui.css">
		<link rel="stylesheet" href="/static/layui/css/modules/laydate/default/laydate.css">

		<style>
			.layui-inline {
				margin-right: 15px;
			}
		</style>
	</head>
	<body>

		日期时间范围选择：
		<div class="layui-inline">
			<input type="text" class="layui-input" id="test1">
		</div>

		<br><br>
		<hr><br>

		日期选择器：
		<div class="layui-inline">
			<input type="text" class="layui-input" id="test2">
		</div>

		<br><br>
		<hr><br>

		年选择器：
		<div class="layui-inline">
			<input type="text" class="layui-input" id="test3">
		</div>

		年月选择器：
		<div class="layui-inline">
			<input type="text" class="layui-input" id="test4">
		</div>

		时间时间器：
		<div class="layui-inline">
			<input type="text" class="layui-input" id="test5">
		</div>

		<br><br>
		<hr><br>

		时间范围选择
		<div class="layui-inline">
			<input type="text" class="layui-input" id="test55">
		</div>

		自定义重要日：
		<div class="layui-inline">
			<input type="text" class="layui-input" id="test555">
		</div>

		<br><br>
		<hr><br>


		同时绑定多个：
		<div class="layui-inline">
			<input type="text" class="layui-input test-item">
		</div>
		<div class="layui-inline">
			<input type="text" class="layui-input test-item">
		</div>
		<div class="layui-inline">
			<input type="text" class="layui-input test-item">
		</div>

		<br><br>
		<hr><br>


		墨绿主题：
		<div class="layui-inline">
			<input type="text" class="layui-input" id="test6-1">
		</div>

		自定义头部背景色：
		<div class="layui-inline">
			<input type="text" class="layui-input" id="test6-2">
		</div>

		格子主题：
		<div class="layui-inline">
			<input type="text" class="layui-input" id="test6-3">
		</div>

		<br><br>
		<hr><br>

		<button class="layui-btn" id="test7">其它元素触发</button>
		<div class="layui-inline">
			<input type="text" class="layui-input" id="test6">
		</div>

		<button class="layui-btn" id="test9">外部事件触发</button>
		<div class="layui-inline">
			<input type="text" class="layui-input" id="test8">
		</div>

		<br><br>
		<hr><br>
		直接嵌套在指定容器中：<br><br>
		<div class="layui-inline" id="test10"></div>
		<div class="layui-inline" id="test11" style="margin-left: 30px;"></div>

		<script src="/static/layui/layui.js" charset="utf-8"></script>
		<script src="/static/layui/lay/modules/laydate.js" charset="utf-8"></script>
		<script>
			layui.use('laydate', function() {
				var laydate = layui.laydate;

				//双控件
				laydate.render({
					elem: '#test1' //指定元素
						,
					type: 'datetime',
					trigger: 'click',
					lang: 'en'
						//,lang: 'en'
						,
					range: true //开启日期范围，默认使用“_”分割
						,
					done: function(value, date, endDate) {
						console.log(value, date, endDate);
					},
					change: function(value, date, endDate) {
						console.log(value, date, endDate);
					}
				});

				//单控件
				laydate.render({
					elem: '#test2'
						//,format: 'yyyy年MM月dd日'
						//,value: new Date(1989,9,14)
						,
					isInitValue: false,
					format: 'yyyyMMdd',
					value: '20170910'

						//,max: 0
						//,min: '2016-10-14'
						//,max: -1
						//,value: '1989年10月14日'
						,
					ready: function(date) {
						console.log(date);
					},
					done: function(value, date, endDate) {
						console.log(value, date, endDate);
					}
				});

				//年选择器
				laydate.render({
					elem: '#test3',
					type: 'year'
						//,range: true 
						//,trigger: 'click'
						,
					done: function(value, date, endDate) {
						console.log(value, date, endDate);
					},
					change: function(value, date, endDate) {
						//this.elem.val(value)
					}
				});

				//年月选择器
				laydate.render({
					elem: '#test4',
					type: 'month',
					range: true
						//,trigger: 'click'
						,
					max: -30,
					done: function(value, date, endDate) {
						console.log(value, date, endDate);
					},
					change: function(value, date, endDate) {
						this.elem.val(value)
					}
				});

				//时间选择器
				laydate.render({
					elem: '#test5',
					type: 'time'
						//,range: true
						//,trigger: 'click'
						,
					min: '09:30:00',
					max: '17:30:00',
					done: function(value, date, endDate) {
						console.log(value, date, endDate);
					},
					change: function(value, date, endDate) {
						//this.elem.val(value)
					}
				});

				//时间范围选择器
				laydate.render({
					elem: '#test55',
					type: 'time',
					range: true
						//,trigger: 'click'
						,
					done: function(value, date, endDate) {
						console.log(value, date, endDate);
					}
				});

				//同时绑定多个
				lay('.test-item').each(function() {
					laydate.render({
						elem: this,
						trigger: 'click'
					});
				});

				//自定义重要日
				var ins555 = laydate.render({
					elem: '#test555'
						//,calendar: true //是否开启公历重要节日
						,
					mark: { //标记重要日子
						'0-8-15': '纪念' //0代表：每年
							,
						'0-0-15': '中旬',
						'2017-8-20': '发布',
						'2017-8-31': '月底'
					},
					done: function(value, date, endDate) {
						if (date.year == 2017 && date.month == 8 && date.date == 15) {
							//console.log('中国人民战胜日本法西斯纪念日');
						}
					},
					change: function(value, date, endDate) {
						console.log(value)
					}
				});

				//墨绿主题
				laydate.render({
					elem: '#test6-1' //指定元素
						,
					type: 'datetime',
					theme: 'molv',
					value: 20180115,
					isInitValue: true
						//,range: true
						,
					trigger: 'click'
				});

				//自定义背景色主题
				laydate.render({
					elem: '#test6-2' //指定元素
						,
					type: 'datetime',
					theme: '#393D49'
						//,range: true
						,
					trigger: 'click'
				});

				//格子主题
				laydate.render({
					elem: '#test6-3' //指定元素
						//,type: 'datetime'
						,
					theme: 'grid'
						//,range: true
						,
					trigger: 'click'
				});

				//其它元素触发
				laydate.render({
					elem: '#test6' //指定元素
						,
					eventElem: '#test7' //绑定执行事件的元素
						,
					lang: 'en'
				});

				//外部事件
				lay('#test9').on('click', function(e) {
					laydate.render({
						elem: '#test8',
						type: 'datetime',
						show: true
							//,min: '2017-08-12 00:10:00'
							//,max: '2017-08-12 23:10:10'
							,
						closeStop: '#test9' //点击 #test6 所在元素区域不关闭控件
							,
						change: function(value, date) {
							console.log(value, date)
						},
						done: function(value, date) {
							console.log(value, date)
						}
					});
				});

				//直接嵌套在指定容器中
				var ins10 = laydate.render({
					elem: '#test10',
					position: 'static',
					calendar: true //是否开启公历重要节日
						,
					mark: { //标记重要日子
						'2017-8-20': '',
						'2017-8-21': ''
					},
					done: function(value, date, endDate) {
						if (date.year == 2017 && date.month == 8 && date.date == 20) {
							ins10.hint('XX活动日');
						}
					},
					change: function(value, date, endDate) {
						console.log(value)
					}
				});

				laydate.render({
					elem: '#test11',
					position: 'static',
					lang: 'en',
					type: 'datetime',
					calendar: true //是否开启公历重要节日
						,
					done: function(value, date, endDate) {
						//console.log(value, date, endDate);
					},
					change: function(value, date, endDate) {
						console.log(value)
					}
				});
			});
		</script>
	</body>
</html>
